<template>
	<view class="container">
		<cu-header bgColor="bg-gradual-blue" :isBack="true">
			<block slot="content" class="page-name">选择售后服务</block>
		</cu-header>
		<view class="contents">
			<view class="cu-card article">
				<view class="cu-item shadow">
					<view class="title flex justify-between">
						<view class="align-center">
							<text class="text-size-32">退款商品</text>
						</view>
						<view></view>
					</view>
					<cu-list-goods :datas="goods"></cu-list-goods>

				</view>
				<view class="cu-item shadow">
					<view class="title flex justify-between">
						<view class="align-center">
							<text class="text-size-32">选择服务类型</text>
						</view>
						<view></view>
					</view>
					<view class="flex justify-between padding-sm align-center">
						<view class="flex align-center">
							<view class="cuIcon-activityfill size-42"></view>
							<view class="margin-left-xs">
								<view class="text-size-34 text-blod text-black">我要退款(无需退货)</view>
								<view class="text-size-24 text-gray margin-top-xs">没有收到货,或则与卖家协商同意不用退货之退款</view>
							</view>
						</view>
						<view class="cuIcon-right text-gray size-36 margin-left-xs"></view>
					</view>
					<view class="flex justify-between padding-sm align-center">
						<view class="flex align-center">
							<view class="cuIcon-activityfill size-42"></view>
							<view class="margin-left-xs">
								<view class="text-size-34 text-blod text-black">我要退款退货</view>
								<view class="text-size-24 text-gray margin-top-xs">已收到货,需要退还收到的货物</view>
							</view>
						</view>
						<view class="cuIcon-right text-gray size-36 margin-left-xs"></view>
					</view>
					<view class="flex justify-between padding-sm align-center">
						<view class="flex align-center">
							<view class="cuIcon-activityfill size-42"></view>
							<view class="margin-left-xs">
								<view class="text-size-34 text-blod text-black">我要换货</view>
								<view class="text-size-24 text-gray margin-top-xs">已收到货,需要更换收到的货物</view>
							</view>
						</view>
						<view class="cuIcon-right text-gray size-36 margin-left-xs"></view>
					</view>
				</view>
			</view>
		</view>
	
	</view>
</template>

<script>
	import {
		mapState,
		mapMutations
	} from 'vuex';
	import cuListGoods from '@/components/diy/list/cu-list-goods.vue'
	export default {
		computed: {
			...mapState(['hasLogin', 'forcedLogin', 'userinfo'])
		},
		components: {
			cuListGoods
		},
		data() {
			return {
				goods: [{
						name: "时尚运动鞋",
						price: 150,
						number: 2,
						image: 'https://ossweb-img.qq.com/images/lol/web201310/skin/big10006.jpg'
					},
					{
						name: "运动套装",
						price: 280,
						number: 2,
						image: 'https://ossweb-img.qq.com/images/lol/web201310/skin/big10006.jpg'
					}
				]
			};
		},
		/**
		 * 用户点击右上角分享
		 */
		onShareAppMessage: function(res) {
			if (res.from === 'button') {
				// 来自页面内分享按钮
				console.log(res.target);
			}
			return this.shareinfo;
		},
		onLoad() {},
		onShow() {
			
		},
		methods: {
			...mapMutations(['logout', 'login', 'loginsoure']),
			

		}
	};
</script>

<style scoped></style>
